<template>
  <div id="wai">
    <div class="nei">
      <h1 class="title">{{ msg }}</h1>
      <ul class="mui-table-view">
        <li class="mui-table-view-cell mui-media" v-for="item in order_news_list" :key="item.goods_cat_id">
          <div class="mui-navigate-right"
            @click="shopping_cat_info(item.goods_cat_id, item.goods_id, item.price, item.count)">
            <div class="mui-media-body">
              <div @click.stop="go_shopping(item.goods_id)" class="zuo"><img
                  :src="$http.defaults.baseURL + item.cover_img_path.slice(1)" alt="图片"></div>
              <div class="you">商品名称：{{ item.name }}<p></p>购买数量：{{ item.count }}</div>
            </div>
          </div>
        </li>
      </ul>

    </div>

  </div>
</template>
  
<script>
export default {
  name: 'shopping_cart_page',
  data() {
    return {
      msg: '购物车',
      session_id: this.$auth.getAuthorization(),
      order_news_list: {},
      order_id: 0,
      orders: {
        session_id: this.$auth.getAuthorization(),
        goods_id: null,
        count: null,
        goods_prace: null,

      }
    }
  },
  created() {
    this.get_orders_list();

  },
  methods: {
    //获取购物车列表
    get_orders_list() {
      this.$http.post('get_order_list.php', { 'session_id': this.session_id },
        {
          headers: {
            'Content-Type': 'application/json' // 设置请求头
          }
        }).then(response => {
          if (response.data.status === 1) {
            // alert(response.data.message);
            console.log(response.data.data);
            this.order_news_list = response.data.data;
          } else {
            // alert(response.data.message);
            console.log(response.data.message);
          }
        })
        .catch(error => {
          console.error(error);
        });
    },
    //去支付
    shopping_cat_info(goods_cat_id, goods_id, goods_price, count) {
      console.log(goods_cat_id);
      this.orders.goods_id = goods_id;
      this.orders.goods_prace = goods_price;
      this.orders.count = count;
      console.log(this.orders);


      if (this.orders.session_id !== null) {
        //修改支付状态
        this.$http.post('change_goods_cat_pay.php', { 'session_id': this.session_id, 'goods_cat_id': goods_cat_id },
          {
            headers: {
              'Content-Type': 'application/json' // 设置请求头
            }
          }).then(response => {
            if (response.data.status === 1) {
              // alert(response.data.message);

              //创建订单
              this.$http.post('create_orders.php', this.orders,
                {
                  headers: {
                    'Content-Type': 'application/json' // 设置请求头
                  }
                }).then(response => {
                  if (response.data.status === 1) {
                    this.order_id = response.data.order_id;
                    alert(response.data.message);
                    this.$router.push({
                      name: 'pay_info', params: {
                        id: this.order_id
                      }
                    });
                    // console.log(response.data.message);
                  } else {
                    // alert(response.data.message);
                    console.log(response.data.message);
                    console.log(this.orders);
                  }
                })
                .catch(error => {
                  console.error(error);
                });
              // console.log(response.data.message);
            } else {
              // alert(response.data.message);
              console.log(response.data.message);
              console.log(this.orders);
            }
          })
          .catch(error => {
            console.error(error);
          });

      } else {
        alert('你还未登录，请先登录！');
        this.$router.push('/user');
      }

    },

    //跳转到购物页面
    go_shopping(goods_id) {
      // console.log(goods_id);
      this.$router.push({ name: 'goodsinfo', params: { id: goods_id } })
    }
  }
}
</script>
  
  <!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
#wai {
  height: 895px;
  overflow-y: scroll;

  .nei {

    .title {
      font-size: 50px;
      margin-top: 2%;
    }

    .zuo {
      /* border: 1px solid red; */
      width: 8%;
      height: 8%;
      float: left;

      img {
        width: 100%;
        height: 50px;
      }
    }

    .you {
      border: 1px solid red;
      /* width: 30%; */
      height: 8%;
      /* float:right; */
      margin-left: 10%;
      font-size: 20px;
      margin-top: 5px;
      /* text-align: left; */
    }
  }
}
</style>
  